<template>
  <div>
    <h2>Vue中的DOM操作</h2>



    <button-counter>
      <div>插槽的内容</div>
      <div slot="button">命名插槽的内容</div>
    </button-counter>


    <div>---------------</div>
    <div ref="head" id="head">ref元素</div>
    <h2>过渡效果</h2>
    <div>---------------</div>
    <button v-on:click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">hello</p>
    </transition>
    <div>world</div>
  </div>
</template>

<script>
import ButtonCounter from '@/components/button-counter.vue'
export default {
  data(){
    return {
      show: true
    }
  },
  components:{
    ButtonCounter
  },
  mouted(){
    // DOM已经生成
    // document.getElementById('head')
    this.$refs.head.innerHTML = 'hello world'
  }
}
</script>

<style>
  /* 显示 》 隐藏 leave leave-active leave-to */
  /* 隐藏 》 显示 enter enter-active enter-to */
  .fade-leave, .fade-enter-to {
    opacity:1;
  }
  .fade-leave-active, .fade-enter-active {
    transition: opacity .5s;
  }
  .fade-leave-to, .fade-enter{
    opacity:0;
  }
</style>